export default {
  data () {
    return {
      rolesList: [],
      addRolesDialog: false,
      addRolesInfo: {},
      addRolesRules: {
        roleName: [
          { required: true, message: '请填写角色名称', trigger: 'change' }
        ],
        roleDesc: [
          { required: true, message: '请填写角色描述', trigger: 'change' }
        ]
      },
      eidtRolesDialog: false,
      eidtRolesInfo: {
        roleName: '',
        roleDesc: '',
        id: 0
      },
      eidtRightsDialog: false,
      rightsList: [],
      // 权限列表中选中的 数组
      checkedRightsList: [],
      // 权限树的信息
      rightsTreeInfo: {
        // 数据中显示文本内容的属性
        label: 'authName',
        // 数据中显示二级选项的属性
        children: 'children'
      },
      // 默认展开的 数组
      expendRightsList: [],
      roleId: 0
    }
  },
  created () {
    // 请求角色列表
    this.getRolesList()
    // 请求权限列表
    this.getRightsList()
  },
  methods: {
    async getRolesList () {
      const { data } = await this.$get('/roles')
      this.rolesList = data
      // console.log(data)
    },
    // 关闭添加角色对话框
    closeAddRolesDialog () {
      this.$refs.addRoles.resetFields()
      this.addRolesInfo = {}
    },
    addRoleHanddler () {
      this.$refs.addRoles.validate(async valid => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '请按照规则完整填写表单'
          })
          return
        }
        const { data, meta } = await this.$post('roles', this.addRolesInfo)
        if (meta.statu === 201) {
          this.$message({
            type: 'success',
            message: '创建角色成功'
          })
          this.addRolesInfo = data
        }
        this.getRolesList()
        this.addRolesDialog = false
      })
    },
    deleteRolesHandler (id) {
      this.$confirm('您真的要删除该角色吗？', '删除角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { meta } = await this.$delete(`roles/${id}`)
        if (meta.status === 200) {
          this.$message({
            type: 'success',
            message: '删除该角色成功'
          })
          this.getRolesList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    showEditRolesHandler (val) {
      this.eidtRolesInfo.roleName = val.roleName
      this.eidtRolesInfo.roleDesc = val.roleDesc
      this.eidtRolesInfo.id = val.id
      this.eidtRolesDialog = true
    },
    eidtRolesInfoHandler () {
      this.$refs.addRoles.validate(async valid => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '请按规则编辑表单'
          })
        }
        const { meta } = await this.$put(`roles/${this.eidtRolesInfo.id}`, this.eidtRolesInfo)
        if (meta.staus === 200) {
          this.$message({
            type: 'success',
            message: '编辑角色成功'
          })
        }
        this.getRolesList()
        this.eidtRolesDialog = false
      })
    },
    async getRightsList () {
      const { data } = await this.$get('rights/tree')
      this.rightsList = data
      data.forEach(item => {
        this.expendRightsList.push(item.id)
        item.children.forEach(t => {
          this.expendRightsList.push(t.id)
        })
      })
    },
    showRightsHandler (val, id) {
      this.roleId = id
      if (!val) return
      val.forEach(item => {
        if (!item.children) return
        item.children.forEach(t => {
          if (!t.children) return
          t.children.forEach(j => {
            this.checkedRightsList.push(j.id)
          })
        })
      })
      this.eidtRightsDialog = true
    },
    // 关闭全选分配对话框的事件处理函数
    async eidtRightsInfoHandler () {
      this.eidtRightsDialog = false
      // 所有选中项的 id
      const checkedIds = this.$refs.rightsTree.getCheckedKeys()
      // 所有办选中项的 id
      const halfCheckedIds = this.$refs.rightsTree.getHalfCheckedKeys()
      const rids = [...checkedIds, ...halfCheckedIds] + ''
      const { meta } = await this.$post(`roles/${this.roleId}/rights`, { rids })
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '修改权限成功'
        })
      }
      this.getRolesList()
      this.eidtRightsDialog = false
    },
    closeRightsDialog () {
      this.checkedRightsList = []
    },
    async deleteRightsHandler (roleId, rightId) {
      // const { meta } = await this.$delete(`roles/${roleId}/rights/${rightId}`)
      // if (meta.status === 200) {
      //   this.$message({
      //     type: 'success',
      //     message: '单一权限删除成功'
      //   })
      // }
      let rights = []
      for (let i = 0; i < this.rolesList.length; i++) {
        if (this.rolesList[i].id === roleId) {
          rights = this.rolesList[i].children
        }
      }
      for (let i = 0; i < rights.length; i++) {
        const first = rights[i]
        if (first.id === rightId) {
          // 删除索引为 i 的数据
          rights.splice(i, 1)
          break
        }
        for (let j = 0; j < first.children.length; j++) {
          const second = first.children[j]
          if (second.id === rightId) {
            first.children.splice(j, 1)
            break
          }
          for (let k = 0; k < second.children.length; k++) {
            const third = second.children[k]
            if (third.id === rightId) {
              second.children.splice(k, 1)
              break
            }
          }
        }
      }
    }
  }
}
